<template>
	<view class="device">
		<view v-if="isShow === 1" class="device-bind">
			<view v-if="showBind" class="device-bind-input">
				<view class="input-tit">请输入机身码：</view>
				<input
					class="input-value flex-center"
					type="text"
					:value="serialNumber"
					@input="onChange"/>
				<view class="btns flex-center-between">
					<button class="btn-back" @click="back">返回</button>
					<button class="btn-confirm" @click="bindDeviceList">确定</button>
				</view>
			</view>
			<view v-else class="device-bind-guide">
				<view class="banner">
					<image class="banner-center" src="../../static/images/device-mobile.png" mode="aspectFill"></image>
					<view class="circle circle-one"></view>
					<view class="circle circle-two"></view>
				</view>
				<view class="guide">
					<view class="uni-h4">请添加设备</view>
					<view class="guide-desc">开启立升智能净水生活</view>
					<button class="guide-btn" @click="onAddDevice('bindDevice')">立即添加</button>
				</view>
			</view>
		</view>
		<view v-if="isShow === 2" class="device-list">
			<uni-fab
				:pattern="pattern"
				:content="content"
				:horizontal="horizontal"
				:vertical="vertical"
				:direction="direction"
				@trigger="trigger">
			</uni-fab>
			<view
				class="device-list-item flex-center"
				v-for="(item,index) in deviceList"
				:key="index">
				<image 
					class="device-list-item-img" 
					:src="item.product.image ? item.product.image : defaultImage" 
					mode="aspectFill"
				></image>
				<view class="device-list-item-right">
					<view class="device-list-item-right-item">
						<view class="device-list-item-right-item-tit text-overflow-one">
							{{item.product.name || '新一代立升净饮一体机'}}
						</view>
					</view>
					<view class="device-list-item-right-item">
						<text class="device-list-item-right-item-info">
							机身码:{{item.baseInfo.number}}
						</text>
					</view>
					<view class="device-list-item-right-item">
						<text v-if="item.product.price" class="device-list-item-right-item-info">
							租赁费：¥{{item.product.price}}
						</text>
					</view>
					<view class="device-list-item-right-item">
						<text v-if="item.product.use_time" class="device-list-item-right-item-info">
							租期: {{item.product.use_time}}
						</text>
					</view>
					<view class="device-list-item-right-item">
						<text class="device-list-item-right-item-info">
							设备状态: {{ item.baseInfo.result_device.status_name }}
						</text>
					</view>
					<!-- <view class="device-list-item-right-item">
						<text class="device-list-item-right-item-info" v-if="item.baseInfo.equipment_address">
							地址: {{item.baseInfo.equipment_address}}
						</text>
					</view> -->
					<view class="btns">
						<button class="action device-btn" @click="action(item.product.id,item.baseInfo.adapter_id,item.baseInfo.number)">操作设备</button>
						<button type="warn" class="cancel device-btn" @click="cancel(item.baseInfo.id)">解绑设备</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab.vue'
	export default {
		components: {
			uniFab
		},
		data() {
			return {
				defaultImage: '/static/images/equipment.jpg',
				isLogin: false,
				serialNumber: '',
				isShow: 0, // 1:显示绑定页, 2:显示列表
				showBind: false,
				deviceList: [],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#333',
					backgroundColor: '#fff',
					selectedColor: '',
					buttonColor:"#00b5c4"
				},
				content: [
					{
						iconPath: '/static/images/device-scan.png',
						selectedIconPath: '',
						text: '扫一扫',
						active: false
					},
					{
						iconPath: '/static/images/device-bind.png',
						selectedIconPath: '',
						text: '手动输入',
						active: false
					}
				]
			}
		},
		onShow() {
			let token = uni.getStorageSync('USER_INFO').token
			if (token) {
				this.isLogin = true
				this.getDeviceList()
			} else {
				this.isShow = 1
			}
		},
		onLoad() {
			
		},
		methods: {
			/**
			 * 获取设备列表信息
			 */
			async getDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/equipment/my-equipment',
					data: {}
				})
				if (res.status === 1) {
					this.isShow = res.data.list.length > 0 ? 2 : 1
					this.deviceList = res.data.list.map(item=>{
						// item.baseInfo.address = item.baseInfo.address && item.baseInfo.address.split('-')[2] || ''
						item.product.image = item.product.image ? this.$baseUrl + item.product.image: item.product.image;
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 绑定设备信息(输入机身码)
			 */
			async bindDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/equipment/add',
					data: { number: this.serialNumber }
				})
				if (res.status === 1) {
					this.isShow = 2
					this.getDeviceList()
					uni.showToast({
						title: '绑定成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
				this.serialNumber = '';
			},
			
			/**
			 * 解绑
			 */
			async cancelBind(id) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/equipment/cancel',
					data: { id: id }
				})
				if (res.status === 1) {
					this.getDeviceList();
					// this.showBind = true
					// this.isShow = 2
					uni.showToast({
						title: '解绑成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 解绑确认
			 */
			cancel(id) {
				uni.showModal({
					title: '提示',
					content: '确定解除绑定？',
					success: (res) => {
						if (res.confirm) {
							this.cancelBind(id)
						}
					}
				});
			},
			
			/**
			 * 监听表单输入框数据
			 * @param {Object} e
			 */
			onChange(e){
				this.serialNumber = e.detail.value
			},
			
			/**
			 * 跳转控制页
			 * @param {Number} id
			 */
			action(id,adapter_id,number){
				this.pageTo('control?id=' + id + '&adapter_id=' + adapter_id + '&number=' + number)
			},
			
			/**
			 * 取消绑定
			 */
			back(){
				this.showBind = false
				this.isShow = this.deviceList.length === 0 ? 1 : 2
			},
			
			/**
			 * 添加机身码
			 * @param {String} page
			 */
			onAddDevice(page){
				let self = this;
				if (!this.isLogin) {
					uni.navigateTo({url: '/pages/login/login'})
					uni.showToast({
						title: '登录后可见',
						icon: 'none'
					})
					return
				}
				uni.showActionSheet({
					itemList: ['扫一扫', '输入机身码'],
					success: (res) => {
						if(res.tapIndex === 0) {
							uni.scanCode({
								success: function (res) {
									console.log('条码内容：' + res.result);
									self.serialNumber = res.result;
									self.bindDeviceList();
								}
							});
						} else if(res.tapIndex === 1) {
							this.showBind = true
							this.isShow = 1
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			
			/**
			 * 扫码or手动输入机身码（扫码的功能没有）
			 * @param {Object} e
			 */
			trigger(e) {
				let self = this;
				if (e.index === 0) {
					uni.scanCode({
						scanType: ['barCode'],
						success: function (res) {
							console.log('条码内容：' + res.result);
							self.serialNumber = res.result;
							self.bindDeviceList();
						}
					});
				} else if(e.index === 1){
					this.showBind = true
					this.isShow = 1
				}
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.device{
		&-list{
			&-item{
				box-sizing: border-box;
				padding: 30rpx 30rpx 30rpx 40rpx;
				background: $uni-bg-color;
				border-top: 20rpx solid $uni-bg-color-grey;
				&-img{      
					width: 180rpx;
					height: 190rpx;
					background: $uni-bg-color-grey;
				}
				&-right{
					margin-left: 20rpx;
					height: 190rpx;
					width: 480rpx;
					position: relative;
					&-item{
						line-height: 1.3;
						&-tit{
							width: 300rpx;
						}
						&-info{
							color: $uni-text-color-grey;
							font-size: $uni-font-size-sm1;
						}
					}
					.btns{
						.device-btn{
							position: absolute;
							right: 0;
							height: 52rpx;
							line-height: 52rpx;
							font-size: $uni-font-size-sm2;
							color: $uni-text-color-inverse;
							background: $uni-color-theme;
						}
						.action{
							top: 0;
						}
						.cancel{
							top: 60rpx;
						}
						.state{
							font-size: 24rpx;
							color: $uni-text-color-inverse;
							background: $uni-color-theme;
							position: absolute;
							right: 0;
							bottom: 0;
							padding: 0 8rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
		
		&-bind{
			&-guide{
				width: 750rpx;
				padding-top: 700rpx;
				overflow: hidden;
				position: relative;
				.banner{
					position: absolute;
					top:0;
					left: 50%;
					transform: translateX(-50%);
					height:600rpx;
					width: 1500rpx;
					background: #19a4af;
					border-radius: 0 0 50% 50%;
					overflow: hidden;
					.banner-center{
						position: absolute;
						width: 188rpx;
						height: 348rpx;
						left: 50%;
						top: 168rpx;
						transform: translateX(-50%);
						z-index: 2;
					}
					.circle{
						width: 300rpx;
						height: 300rpx;
						position: absolute;
						left: 50%;
						top: 180rpx;
						margin-left: -150rpx;
						border-radius: 50%;
						z-index: 1;
					}
					.circle-one{
						background-color: #4ab7c0;
						animation: click1 2s linear infinite; 
					}
					.circle-two{
						background-color: #36afb9;
						animation: click2 2s linear infinite; 
					}
				}
				.guide{
					text-align: center;
					.guide-desc{
						line-height: 60rpx;
						font-size: $uni-font-size-sm2;
						color: $uni-text-color-grey;
					}
					.guide-btn{
						margin: 90rpx auto 0;
						width: 316rpx;
						height: 90rpx;
						border-radius: 45px;
						line-height: 90rpx;
						font-size: $uni-font-size-lg;
						background: $uni-color-theme;
						color: $uni-text-color-inverse;
					}
				}
				@keyframes click1 {
					0% {
						opacity: .8;
						-webkit-transform: scale(1);
						transform: scale(1);
					}
					100% {
						opacity: 0;
						-webkit-transform: scale(2);
						transform: scale(2);
					}
				}
				@keyframes click2 {
					0% {
						opacity: .8;
						-webkit-transform: scale(1);
						transform: scale(1);
					}
					100% {
						opacity: 0;
						-webkit-transform: scale(3);
						transform: scale(3);
					}
				}
			}
			&-input{
				padding: 50rpx;
				.input-tit{
					line-height: 120rpx;
					color: $uni-text-color-grey;
				}
				.input-value{
					padding: 20rpx 10rpx;
					font-size: $uni-font-size-lg1;
					border: 1rpx solid $uni-border-color;
					border-radius: $uni-border-radius-base;
					background: $uni-bg-color;
				}
				.btns{
					padding: 30rpx 0;
					button{
						height: 95rpx;
						line-height: 95rpx;
						width: 100%;
						font-size: $uni-font-size-lg1;
						border-radius: $uni-border-radius-lg;
					}
					.btn-back{
						margin-right: 30rpx;
					}
					.btn-confirm{
						color: $uni-text-color-inverse;
						background-color: $uni-color-theme;
					}
				}
			}
		}
	}
</style>
